<template>
    <div class="ownt">
        <div class="own " v-for="(item, index) in tablist" :key="index" :class="{ active: tabindex == index }" @click="tabhandel(index)">
            <div style="text-align:center">
                <div class="ownTabicon"><img :src="item.img" /></div>
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Tabar",
    props: {
        AirdropIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {

            tablist: [{
                name: 'Home',
                img: require('../..//static/tab/0.png')
            }, {
                name: 'Game',
                img: require('../../static/tab/1.png')
            }, {
                name: 'Share',
                img: require('../../static/tab/2.png')
            }, {
                name: 'Leaderboard',
                img: require('../../static/tab/3.png')
            }, {
                name: 'Airdrop',
                img: require('../../static/tab/4.png')
            }],
            tabindex: 0,
        };
    },
    watch: {
        AirdropIndex(o, c) {
            if (o) this.tabindex = o
        }
    },
    methods: {
        tabhandel(i) {
            this.tabindex = i
            this.$emit('tanCilck', i)
        }
    }
}
</script>

<style scoped lang="scss">
.ownt{
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 75px;
		display: flex;
		background: #000;
		justify-content: space-between;
        align-content: center;
        color: #fff;
		.own{
			width: 20%;
			height: 100%;
			position: relative;
			text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-size: 12px;
			div{
				width: 100%;
				// height: calc(160rpx - 62rpx);
				color: #fff;
				font-size: 10px;
			}
			
			.ownTabicon{
				width: 100%;
				// height: calc(160rpx - 60rpx);
				img{
					width: 24px;
					height: 24px;
					margin-top: 30rpx;
				}
			}
		}
	}
	.active::before{
		content: ' ';
		position: absolute;
		width: 100%;
		height: 1px;
		border-radius: 5px;
		top: -3px;
		background: rgb(193, 227, 255);
		left: 0;
	}
</style>